<template>
  <div style="padding: 20px; background: white; min-height: 100vh;">
    <h1 style="color: red; font-size: 24px; margin-bottom: 20px;">
      🧪 SmartEvaluation 测试页面
    </h1>
    
    <div style="background: #f0f0f0; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
      <h2>✅ 路由测试成功</h2>
      <p>如果你能看到这个页面，说明路由配置是正常的。</p>
      <p><strong>当前时间:</strong> {{ currentTime }}</p>
      <p><strong>页面路径:</strong> {{ currentPath }}</p>
    </div>

    <div style="background: #e7f3ff; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
      <h3>🔍 调试信息</h3>
      <ul>
        <li>组件名称: {{ $options.name }}</li>
        <li>Vue版本: {{ vueVersion }}</li>
        <li>路由器存在: {{ !!$router }}</li>
        <li>数据响应性: {{ testData }}</li>
      </ul>
    </div>

    <div style="background: #f0fff0; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
      <h3>🎯 功能测试</h3>
      <button @click="testClick" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
        点击测试 ({{ clickCount }})
      </button>
      <button @click="goBack" style="padding: 10px 20px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">
        返回首页
      </button>
    </div>

    <div style="background: #fff3cd; padding: 15px; border-radius: 8px;">
      <h3>⚠️ 如果原页面空白，可能的原因:</h3>
      <ol>
        <li>CSS 样式问题 (变量未定义、样式冲突)</li>
        <li>JavaScript 错误阻止渲染</li>
        <li>数据初始化问题</li>
        <li>异步操作未完成</li>
        <li>条件渲染导致内容不显示</li>
      </ol>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartEvaluationTest',
  data() {
    return {
      currentTime: new Date().toLocaleString(),
      testData: 'Vue响应性正常',
      clickCount: 0
    }
  },
  computed: {
    currentPath() {
      return this.$route?.path || window.location.pathname
    },
    vueVersion() {
      return '3.x'
    }
  },
  mounted() {
    console.log('🧪 SmartEvaluation 测试页面加载成功')
    console.log('📊 测试数据:', this.$data)
    
    // 每秒更新时间
    setInterval(() => {
      this.currentTime = new Date().toLocaleString()
    }, 1000)
  },
  methods: {
    testClick() {
      this.clickCount++
      console.log('🖱️ 点击测试:', this.clickCount)
    },
    goBack() {
      if (this.$router) {
        this.$router.push('/')
      } else {
        window.location.href = '/'
      }
    }
  }
}
</script>

